<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="header-title">终端配置管理</text>
    </view>
    
    <!-- 功能按钮区域 -->
    <view class="buttons-container">
      <view class="button-row">
        <!-- 配置终端流速仪按钮 -->
        <view class="button-card" @click="handleButtonClick('流速仪')">
          <view class="button-icon" style="background-color: #4a6cf7;">
            <text class="icon">🌊</text>
          </view>
          <text class="button-title">配置终端流速仪</text>
          <text class="button-desc">设置流速仪参数和设备配置</text>
        </view>
        
        <!-- 配置终端渠道断面按钮 -->
        <view class="button-card" @click="handleButtonClick('断面')">
          <view class="button-icon" style="background-color: #00c853;">
            <text class="icon">📐</text>
          </view>
          <text class="button-title">配置终端渠道断面</text>
          <text class="button-desc">设置渠道断面参数和测量点</text>
        </view>
      </view>
      
     <view class="button-row">
        <view class="button-card" @click="handleButtonClick('删除')">
          <view class="button-icon" style="background-color: #ff6b6b;">
            <text class="icon">🗑️</text>
          </view>
          <text class="button-title">清空渠道断面</text>
          <text class="button-desc">清除渠道断面配置和数据</text>
        </view>
      </view>
    </view>
	<u-modal showCancelButton :show="ifParameter" title="是否清空断面参数" @confirm="confirmParameterFn"
		@cancel="cancelParameterFn"></u-modal>
  </view>
</template>

<script>
  export default {
    data() {
      return {
		   ifParameter: false
      }
    },
    methods: {
      handleButtonClick(module) {
       if(module == '流速仪'){
		   uni.navigateTo({
		   	url: '/pages/settings/cesuyi'
		   });
	   }
       if(module == '断面'){
		   uni.navigateTo({
		   	url: '/pages/settings/course'
		   });
	   }
       if(module == '删除'){
		   this.ifParameter = true
	   }
      },
	  confirmParameterFn() {
	  	uni.$u.vuex('vuex_saveCezhandata', [])
	  	this.ifParameter = false
	  },
	  cancelParameterFn() {
	  	this.ifParameter = false
	  },
    }
  }
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    padding: 30rpx;
  }
  
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40rpx 0 60rpx 0;
  }
  
  .logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30rpx;
  }
  
  .logo-box {
    width: 120rpx;
    height: 120rpx;
    background: linear-gradient(135deg, #4a6cf7, #6a11cb);
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
  }
  
  .logo-text {
    color: #ffffff;
    font-size: 50rpx;
    font-weight: bold;
  }
  
  .app-name {
    font-size: 36rpx;
    font-weight: 600;
    color: #2c3e50;
  }
  
  .header-title {
    font-size: 40rpx;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
  }
  
  .buttons-container {
    display: flex;
    flex-direction: column;
    gap: 40rpx;
    margin-bottom: 60rpx;
  }
  
  .button-row {
    display: flex;
    justify-content: space-between;
    gap: 30rpx;
  }
  
  .button-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 40rpx 20rpx;
    box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }
  
  .button-card:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  }
  
  .button-icon {
    width: 120rpx;
    height: 120rpx;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
  }
  
  .icon {
    font-size: 60rpx;
  }
  
  .button-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15rpx;
    text-align: center;
  }
  
  .button-desc {
    font-size: 24rpx;
    color: #7f8c8d;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 10rpx;
  }
  
  .button-status {
    font-size: 22rpx;
    color: #4a6cf7;
    font-weight: 500;
    text-align: center;
  }
  
  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    padding-top: 40rpx;
  }
  
  .footer-text {
    font-size: 24rpx;
    color: #95a5a6;
    line-height: 1.8;
    text-align: center;
  }
  
  /* 响应式适配 */
  @media (max-width: 750px) {
    .button-row {
      flex-direction: column;
    }
    
    .button-card {
      margin-bottom: 30rpx;
    }
  }
</style>
<style>
	page {
		background-color: #e1e9f0;
	}
</style>